<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>收益结算</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../css/draw.css">
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"><!--收益结算--></h1>
    <button id="drawDetail" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">结算明细</button>
</header>
<div class="mui-content ">
    <div class="total">
        <div class="total_ctrl">
            <div class="total_ctrl_circle_txt mui-text-center">可提收益</div>
            <div id="totals" class="mui-text-center">11.00</div>
            <!--水晶球-->
            <div class="crystal">
                <!--球-->
                <div class="box">
                    <div class="wave"></div>
                    <!--<span class="drop"></span>-->
                </div>
            </div>
        </div>
    </div>
    <div style="height:10px;"></div>
    <div class="draw">
        <div class="draw__tit">提取收益</div>
        <div class="draw__in">
            <span class="fa fa-cny fa-fw"></span>
            <input type="number" placeholder="0.00">
        </div>
        <div class="draw__txt">
            最低可提 <span>￥10.00</span>
        </div>
    </div>

    <div style="height:10px;"></div>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>验证码</label>
            <input id="phoneCode" type="number" maxlength="6" placeholder="请输入验证码">
            <span id="send">发送验证码</span>
        </div>
    </form>
    <div class="note">
        收取0.5元/笔手续费，结算提交后T+1到账，节假日不到账
    </div>
    <div class="mui-row">
        <div class="mui-button-forms">
            <button id="submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">结算提交</button>
        </div>
    </div>

</div>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script>
    /*
     * pct 为动态传入的值，用于控制水面上升的高度
     * 需根据自己需求计算百分比pct
    * pct = 0时没有水
    * pct = 55时水满
*/
    var pct = 45;
    // 水面上升和波动动画
    var style = document.styleSheets[0];

    function rise() {
        // style.insertRule("@keyframes rotate_before{from{ transform: translate(0%,-5%) rotate(0deg); }to{ transform: translate(0%,-"+pct+"%) rotate(360deg);}}",9);//写入样式
        // style.insertRule("@keyframes rotate_after{from{ transform: translate(0%,-5%) rotate(0deg); }to{ transform: translate(0%,-"+pct+"%) rotate(30deg);}}",10);//写入样式
        style.insertRule("@keyframes loop0{ from{ transform:translate(0%,-" + pct + "%) rotate(0deg); }to{  transform:translate(0%,-" + pct + "%) rotate(360deg);}}", 11);//写入样式
    }

    rise();
    //水面不再上升
    // setTimeout(function(){
    // $(".wave").addClass("loop");
    // },8000);
</script>
<script>

    // 60s倒计时
    var wait = 60;
    var flag = true;

    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.innerHTML = "发送验证码";
            wait = 60;
            flag = true;
        } else {
            flag = false;
            o.setAttribute("disabled", true);
            o.innerHTML = "重新发送(" + wait + ")";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }

    mui.ready(function () {
        // 倒计时
        mui(".mui-input-row").on('tap', "#send", function () {
            if (flag) {
                time(this);
                console.log("11")
            } else {

                console.log("22")
            }
        })
        // 详情
        mui('.mui-bar').on('tap', '#drawDetail', function () {
            location.href = "draw_detail.html"
        })
    })
</script>
</body>
</html>